
import React from "react";
import { Form, Modal, Input, Button, Select, TreeSelect } from "antd";
import PropTypes from 'prop-types';
import { arrayToTree } from 'utils';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const { TreeNode } = TreeSelect;

@Form.create()
export default class UpdateFormModal extends React.Component {
  static propTypes = {
    dataSource: PropTypes.object,
    roles: PropTypes.array,
    departments: PropTypes.array,
    jobs: PropTypes.array,
    form: PropTypes.object,
    visible: PropTypes.bool.isRequired,
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
  }

  /**
   * 处理成功，并触发ok事件
   */
  _handleOk = () => {
    const { 
      onOk, 
      onCancel, 
      form: {
        validateFieldsAndScroll, 
        resetFields,
      },
    } = this.props;

    validateFieldsAndScroll((err, values) => {
      if (!err) {
        onOk(values);
        resetFields();
        onCancel();
      }
    });
  }

  /**
   * 处理取消
   */
  _handleCancel = () => {
    const { onCancel } = this.props;
    onCancel();
  }

  _renderSelectJobs = () => {
    const { jobs } = this.props;

    const _children = [];

    jobs.forEach(ele => {
      _children.push(<Option key={ele.ID} >{ele.Name}</Option>);
    });

    return (<Select
      placeholder="请选择职位"
      style={{ width: 300 }}
    >
      {_children}
    </Select>);
  }

  _renderSelectDepartments = () => {
    const { departments } = this.props;
    const newDepts = departments.map(_ => ({
      key: _.ID,
      value: _.ID,
      label: _.Name,
      pid: _.ParentID,
      treePath: _.TreePath,
    }));
    const treeOptions = arrayToTree(newDepts, 'value', 'pid', 'children');
    
    return (
      <TreeSelect 
        showSearch
        placeholder="请选择部门"
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        style={{ width: 300 }}
        allowClear
        treeDefaultExpandAll
        treeData={treeOptions}
      />
    );
  }

  _renderSelectRoles = () => {
    const { roles } = this.props;
    const newRoles = roles.map(_ => ({
      key: _.ID,
      value: _.ID,
      label: _.Name || _.GroupName,
      pid: _.GroupID,
      disableCheckbox: Object.prototype.hasOwnProperty.call(_, "GroupName"),
    }));

    const treeOptions = arrayToTree(newRoles, 'value', 'pid', 'children');

    return (
      <TreeSelect
        treeData={treeOptions}
        searchPlaceholder="请选择角色"
        style={{ width: 300 }}
        allowClear
        treeCheckable
        showCheckedStrategy={TreeSelect.SHOW_CHILD}
      />
    );
  }

  render () {
    const { 
      dataSource,
      visible,
      form: {
        getFieldDecorator,
      },
    } = this.props;
    return (
      <Form>
        <Modal
          title={'新增团员'}
          visible={visible}
          onOk={this._handleOk}
          onCancel={this._handleCancel}
          footer={
            [
              <Button key="cancel" onClick={this._handleCancel} >取消</Button>,
              <Button key="ok" type="primary" onClick={this._handleOk} >确定</Button>,
            ]
          }
        >
          <FormItem
            label="姓名"
          >
            {
              getFieldDecorator('name', {
                initialValue: dataSource.name,
                rules: [{ required: true, message: '请输入姓名' }],
              })(<Input placeholder="e.g. 孔乙己" />)
            }
          </FormItem>

          <FormItem label="手机" >
            {getFieldDecorator('mobile', {
              // placeholder: '手机号',
              initialValue: dataSource.mobile,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input placeholder="e.g. 186********" />)}
          </FormItem>

          <FormItem label="电子邮箱" >
            {getFieldDecorator('email', {
              initialValue: dataSource.email,
              rules: [
                {
                  required: false,
                },
              ],
            })(<Input placeholder="e.g. kongyiji@unite.com" />)}
          </FormItem>

          <FormItem label="职务" >
            {getFieldDecorator('job', {
              initialValue: dataSource.job,
              rules: [
                {
                  required: true,
                },
              ],
            })(this._renderSelectJobs())}
          </FormItem>

          <FormItem label="所在部门" >
            {getFieldDecorator('department', {
              initialValue: dataSource.department,
              rules: [
                {
                  required: true,
                },
              ],
            })(this._renderSelectDepartments())}
          </FormItem>

          <FormItem label="角色" >
            {getFieldDecorator('roles', {
              initialValue: dataSource.roles,
              rules: [
                {
                  required: true,
                },
              ],
            })(this._renderSelectRoles())}
          </FormItem>

        </Modal>
      </Form>
    );
  }
}

